// //  银行账户管理：BankManagement

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'
// 
import { Select, Form, Input, DatePicker, Space, Button, Table, Modal, Switch } from 'antd'


// // 表格数据列表对象
const data = []
for (let i = 1; i <= 46; i++) {
    data.push({
        key: i,
        account: ` ${i}`,
        account_name: '杭州蚂蚁小贷',
        bank_of_deposit: '招商银行',
        bank: '杭州招商银行于华路支行',
        currency: '人命币',
        account_state: '基本账户',
        update_time: '2018-12-6-06',
        state: '使用中',
        remarks: '00000',
    })
}


const columns = [
    {
        title: '账号',
        dataIndex: 'account',
        key: 'account',
        align: 'center',
    },
    {
        title: '账户名称',
        dataIndex: 'account_name',
        key: 'account_name',
        align: 'center',
    },
    {
        title: '开户银行',
        dataIndex: 'bank_of_deposit',
        key: 'bank_of_deposit',
        align: 'center',
    },
    {
        title: '开户行',
        dataIndex: 'bank',
        key: 'bank',
        align: 'center',
    },
    {
        title: '币种',
        dataIndex: 'currency',
        key: 'currency',
        align: 'center',
    },
    {
        title: '账户类型',
        dataIndex: 'account_state',
        key: 'account_state',
        align: 'center',
    },
    {
        title: '更新时间',
        dataIndex: 'update_time',
        key: 'update_time',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'key',
        align: 'center',
        width: 200,
        render: text =>
            <div className="spans">
                <Button size="small">编辑</Button>
                <Button size="small" type="dashed" danger>删除</Button>
            </div>
    },

]

export default function BankManagement() {

    const { RangePicker } = DatePicker

    const [stat, getState] = useState(false);

    const daoru = () => {
        getState(true)
    }

    const handleOk = () => {
        getState(false);
    };

    const handleCancel = () => {
        getState(false);
    };

    return (
        <div className='bankManagement'>
            {/* 表格主体 */}
            <div className='bank_body'>
                {/* 表格头 */}
                <div className="bank_body_head">
                    <p className="text">数据列表</p>
                    <div className="body_head_right">
                        <Button type="primary" onClick={daoru}>导入</Button>
                        <Button>导出</Button>
                    </div>
                </div>
                {/* 表格主体 */}
                <Table bordered columns={columns} dataSource={data} />

                {/* 导入弹框 */}
                <Modal className='daoru' title='添加银行账户' visible={stat} onOk={handleOk}
                    onCancel={handleCancel} okText='确认' cancelText='取消' width='800px' height='600px'>
                    <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                        <Form.Item label='账户名称：'>
                            <Input placeholder="请输入账号名称" style={{ width: '400px' }} />
                        </Form.Item>

                        <Form.Item label='账号：'>
                            <Input placeholder="请输入账号" style={{ width: '400px' }} />
                        </Form.Item>

                        <Form.Item label='开户银行：'>
                             <Select placeholder="请选择摘要" style={{ width: '400px' }}>
                                <Select.Option value="demo">招商银行</Select.Option>
                                <Select.Option value="demo">农业银行</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label='开户行名称'>
                            <Input placeholder="请输入开户行名称" style={{ width: '400px' }} />
                        </Form.Item>

                        <Form.Item label='币种：'>
                             <Select style={{ width: '400px' }} placeholder="请选择币种">
                                <Select.Option value="demo">人民币</Select.Option>
                                <Select.Option value="demo">美元</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label='账户类型：'>
                             <Select style={{ width: '400px' }} placeholder="请选择摘要">
                                <Select.Option value="demo">基本账户</Select.Option>
                                <Select.Option value="demo">专用账户</Select.Option>
                                <Select.Option value="demo">辅助账户</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label='是否启用(状态)：'>
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    )
}
